<template>
	<view class="myHistoryRedEnvelope">
		<!-- 优惠券样式 -->
		<view class="myHistoryRedEnvelope_redEnvelopeStyle" v-for="item in overdueCouponList" :key="item.id">
			<image src="../../static/redEnvelopes.png" class="myHistoryRedEnvelope_redEnvelopesImg"></image>
			<view class="myHistoryRedEnvelope_redEnvelopeStyleBody">
				<p style="font-size: 16px;font-weight: bold;margin-top: 10px;">{{item.couponName}}</p>
				<p style="font-size: 14px;font-weight: bold;color:#FF5A44;;margin-top: 10px;">{{item.updateTime}}到期</p>
			</view>
			<view class="myHistoryRedEnvelope_redEnvelopePrice">
				<p class="myHistoryRedEnvelope_p"><span style="font-size: 14px;font-weight: bold;">￥</span>{{item.couponPrice}}</p>
				<p v-if="item.redEnvelopeType===1" style="margin-top: 6px;color: #747273;font-size: 12px;">无门槛</p>
				<p v-if="item.redEnvelopeType===2" style="margin-top: 6px;color: #747273;font-size: 12px;">满{{item.fullDecrementPrice}}可用</p>
			</view>
			<view class="myHistoryRedEnvelope_redEnvelopeBottom">
				<p style="font-size: 12px;color:#747273;margin-top: 20px;margin-left: 10px;width: 120px;float: left;">限外卖到家业务使用</p>
				<image src="../../static/update.png" class="myHistoryRedEnvelope_udpateImg"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 从头部获取用户id
				id:'',
				// 查询用户过期的优惠券结果
				overdueCouponList:[],
			}
		},
		methods:{
			getOverdueCoupon(){
				this.$myRequest({
					url:'/eat-service/shopCouponStatistic/getOverdueCoupon',
					data:{
						userId: this.id
					}
				}).then(res=>{
					this.overdueCouponList = res.data.obj
				})
			},
		},
		mounted(){
			// 从头部获取用户id
			this.id = uni.getStorageSync("id")
			// 初始化加载过期的优惠券
			this.getOverdueCoupon()
		}
	}
</script>

<style>
	.myHistoryRedEnvelope{
		width: 418px;
		height: 800px;
		background-color: #F5F5F5;
		overflow: hidden;
	}
	.myHistoryRedEnvelope_redEnvelopeStyle{
		width: 380px;
		height: 140px;
		background-color: white;
		border-radius: 16px;
		margin-top: 10px;
		margin-left: 20px;
		opacity:0.5;
	}
	.myHistoryRedEnvelope_redEnvelopesImg{
		width: 66px;
		height: 66px;
		margin-left: 10px;
		margin-top: 10px;
		float: left;
	}
	.myHistoryRedEnvelope_redEnvelopeStyleBody{
		width: 200px;
		height: 60px;
		margin-top: 10px;
		margin-left: 10px;
		float: left;
	}
	.myHistoryRedEnvelope_redEnvelopePrice{
		width: 90px;
		height: 60px;
		float: left;
		margin-top: 10px;
		text-align: center;
	}
	.myHistoryRedEnvelope_p{
		font-size: 20px;
		font-weight: bold;
		color: #FB5D40;
		margin-top: 10px;
	}
	.myHistoryRedEnvelope_redEnvelopeBottom{
		width: 360px;
		height: 50px;
		border-top:2px solid #F2F2F2;
		float: left;
		margin-left: 10px;
		margin-top: 10px;
	}
	.myHistoryRedEnvelope_udpateImg{
		width: 50px;
		height: 50px;
		float: right;
	}
</style>